<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>账户信息</title>
    <link rel="stylesheet" href="../js/element-ui-2.13.0/lib/theme-chalk/index.css">
    <style>
        #whole {
            margin: 0 auto;
            width: 500px;
            height: 500px;
            display: flex;
            justify-content: center; /*实现水平居中*/
            align-items: center; /*实现垂直居中*/
            top: 50%;
            left: 50%;
            position: absolute;
            margin: -250px 0 0 -250px;
            background: black;
        }

        body {
            background: black;
        }

    </style>
    <script src="../js/vue.js"></script>
    <script src="../js/element-ui-2.13.0/lib/index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
</head>
<body>
<div id="whole">
    <div>
        <el-link href="chargeAccounts.html">回到账单首页<i class="el-icon-view el-icon--right"></i> </el-link>
        <br>
        <el-select style="width: 100%" v-model="params.accountType" placeholder="请选择账户类型" clearable>
            <el-option
                    v-for="item in accountTypes"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>
        <el-input  :placeholder="balancePlaceHolder" v-model="params.accountBalance" maxlength="12" clearable>
            <template slot="prepend">{{balanceLabel}}</template>
        </el-input>
        <el-button style="width: 100%" type="primary" @click="submit">提交</el-button>
        <el-divider></el-divider>
        <template>
            <el-table
                    :cell-style="{'text-align':'center'}"
                    :data="accountInformation"
                    border
                    style="width: 100%">
                <el-table-column
                        align="center"
                        fixed
                        prop="index"
                        label="序号"
                        width="50px"
                >
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="accountType"
                        label="账户类型"
                        width="150px"
                >
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="accountBalance"
                        width="200px"
                        label="账户余额">
                </el-table-column>
                <el-table-column
                        align="center"
                        fixed="right"
                        label="操作"
                        width="100px">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
                        <el-button @click="updateBill(scope.row)" type="text" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-input v-model="sumBalance" disabled>
                <template slot="prepend">总余额为：</template>
            </el-input>
        </template>
    </div>
</div>
</body>
<script>
    const app = new Vue({
        el: '#whole',
        data: {
            params: {
                accountType: "",
                accountBalance: ""
            },
            accountTypes: [],
            sumBalance: "0",
            accountInformation: [],
            balanceLabel: "余额变动",
            balancePlaceHolder: "请输入账户余额变动（原余额加上该数）",
            editLabel: "编辑"
        },
        created() {
            // 对cookie操作
            var cookies = document.cookie;
            var cookie_array = cookies.split(";");
            for (var i = 0; i < cookie_array.length; i++) {
                var cookie = cookie_array[i];
                var array = cookie.split("=");
                if (array[0] == " username") {
                    this.params.username = array[1];
                }
            }
        },
        methods: {
            queryAccountType(){
                axios.post('https://3723r72n06.picp.vip/mylife/bill/queryAccountType', "", {headers: {'conTent-Type': 'application/json'}}).then(response => {
                    response.data.forEach(item => {
                        let arr = {
                            value: item,
                            label: item
                        };
                        this.accountTypes.push(arr);
                    });
                });
            },
            queryAccountInformation() {
                axios.post('https://3723r72n06.picp.vip/mylife/bill/queryAccountInformation', this.params, {headers: {'conTent-Type': 'application/json'}}).then(response => {
                    this.accountInformation = response.data;
                    if (response.data[0].sumBalance !== null && response.data[0].sumBalance !== undefined && response.data[0].sumBalance !== ""){
                        this.sumBalance = response.data[0].sumBalance+"元";
                    }
                });
            },
            submit(){
                if (this.params.accountType === "" || this.params.accountType === null){
                    this.$message.error("账户类型不可为空！");
                    return;
                }
                axios.post('https://3723r72n06.picp.vip/mylife/bill/changeAccountInformation', this.params, {headers: {'conTent-Type': 'application/json'}}).then(response => {
                    if (response.data.code == 200) {
                        this.$message.success(response.data.msg);
                        this.queryAccountInformation();
                        this.params.accountType = "";
                        this.params.accountBalance = "";
                    } else if (response.data.code !== 200) {
                        this.$message.warning(response.data.msg);
                        this.queryAccountInformation();
                        this.params.accountType = "";
                        this.params.accountBalance = "";
                    }
                });
            },
            handleClick(row){
                this.$confirm('此操作将永久删除该账户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.params.id = row.id;
                    axios.post('https://3723r72n06.picp.vip/mylife/bill/deleteAccount', this.params, {headers: {'conTent-Type': 'application/json'}}).then(response => {
                        if (response.data.code == 200) {
                            this.$message.success(response.data.msg);
                            this.queryAccountInformation();
                        } else if (response.data.code !== 200) {
                            this.$message.warning(response.data.msg);
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            updateBill(row){
                this.params.accountType = row.accountType;
            }
        },
        mounted() {
            this.queryAccountType();
            this.queryAccountInformation();
        }
    });
</script>
</html>